<template>
	<div>
		<div flex="main:justify">
			<div style="width: 48%">
				<base-form ref="customForm" :formRow="basicFormRow" :isFunBtn="false" @elDialogClick="elDialogClick"
					@onSubmit="getSubmit">
				</base-form>
				<p class="small_title">功能点</p>
				<div flex="main:justify" style="align-items: center;">
					<div>
						<el-checkbox v-model="dataMain.Bm_IsApprover" label="审批流" border></el-checkbox>
						<el-checkbox v-model="dataMain.Bm_IsAttachment" label="附件" border></el-checkbox>
					</div>
					<el-radio-group v-model="dataMain.Bm_openType">
						<el-radio :label="1">弹窗</el-radio>
						<el-radio :label="2">菜单</el-radio>
					</el-radio-group>
				</div>
				<p class="small_title">数据库表名</p>
				<base-layout ref="databaseName" :buttonList="buttonList" @onFuncBtn="databaseFuncBtn"
					:showTitle="false">
					<div slot="main">
						<base-table ref="databaseCustomtable" :border="true" :showIndex="false"
							:tabLoading.sync="databaseTabLoading" :tableHeight="databaseTableHeight" :slotrow="true"
							@onFunc="databaseOnFunc" :tableData="tablesData" :tableColumn="databaseTableColumn"
							@onCellClick="databaseTCell" @radioChange="databaseRadioChange" @rowDblclick="databaseDbclick"
							:funData="databaseFunData"	:funWidth="150">
						</base-table>
					</div>
				</base-layout>
			</div>
			<div style="width: 50%;">
				<p class="bigTitle">表名称{{fieldName}}</p>
				<base-layout ref="fieldName" :buttonList="buttonList" @onFuncBtn="fieldFuncBtn" :showTitle="false">
					<div slot="main">
						<base-table ref="fieldCustomtable" :border="true" :showIndex="false" :fixedTable="fieldfixedTable"
							:tabLoading.sync="fieldTabLoading" :tableHeight="fieldTableHeight" :tableData="tableCoulmnData" @onFunc="fieldOnFunc"
							:tableColumn="fieldTableColumn" @onCellClick="fieldTCell" :funData="fielFunData">
						</base-table>
					</div>
				</base-layout>
			</div>
		</div>
		<!-- 选择上级菜单 -->
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" @handleConfirmClick="menuConfirmClick"
			:appendBody="true" :dialogVisible.sync="menuDialog" class="userDialog" title="选择上级菜单" width="700px"
			top="10vh" :footerShow="true">
			<div class="organizationBody">
				<base-layout title="菜单树" style="width: 45%;min-height: 300px;overflow: auto;" :bottonShow="false"
					:isPage="false" :mainHight="menuHight">
					<div slot="main">
						<base-tree ref="baseTree" :isCenter="false" :isSaveBtn="false" :Allshow="false"
							:expandAll="false" :showCheckbox="false" :menuData="menuData"
							@handleNodeClick="menuTreeClick">
						</base-tree>
					</div>
				</base-layout>
				<base-layout title="菜单及上级菜单" style="width: 45%;" :bottonShow="false" :isPage="false"
					:mainHight="menuHight">
					<div slot="main" style="padding: 10px;">
						<div flex="cross:center">
							<label style="width: 35%;">模块名称</label>
							<el-input style="flex:1" v-model="dialogFrom.fatherMenuName"></el-input>
						</div>
					</div>
				</base-layout>
			</div>
		</base-dialog>
		<!-- 新增/编辑数据库表名 -->
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false"
			@handleConfirmClick="databaseConfirmClick" :appendBody="true" :dialogVisible.sync="databaseDialog"
			class="userDialog" :title="databaseTitle" width="400px" top="10vh" :footerShow="true">
			<base-form ref="databaseForm" :formRow="databaseFormRow" :isFunBtn="false"></base-form>
		</base-dialog>
		<!-- 新增/编辑表字段 -->
		<base-dialog :closeEscape="true" :showClose="true" :closeModal="false" :footerShow="true"
			@handleConfirmClick="fieldConfirmClick" :appendBody="true" :dialogVisible.sync="fieldDialog"
			class="userDialog" :title="fieldTitle" width="600px" top="10vh" >
			<base-form ref="fieldForm" :formRow="fieldFormRow" :isFunBtn="false" @onSelect="fieldSelect"></base-form>
		</base-dialog>
	</div>
</template>

<script>
	import baseForm from "@/components/base/baseNewForm"
	import baseTable from "@/components/base/baseTable"
	import baseTree from "@/components/base/BaseMenuTree"
	import baseDialog from "@/components/base/BaseNewDialog"
	import baseLayout from "@/components/base/baseLayout"
	import configData from "./configData"
	import {
		GetMenuTree
	} from '@/api/apis/menuManage'
	import {
		dataDictionaryGetBillList
	} from '@/api/apis/dataDictionary'
	import {
		GetTablesCoulmn,
		DelTables,
		DelTableColumn
	} from '@/api/apis/documentManagement'
import LogoVue from '../../../layout/components/Sidebar/Logo.vue'
import loginVue from '../../login.vue'
	export default {
		components: {
			baseForm,
			baseLayout,
			baseTable,
			baseDialog,
			baseTree
		},
		data() {
			return {
				documentRecord:[],
				dataMain:{
					Bm_IsApprover:'',
					Bm_IsAttachment:'',
					Bm_openType:''
				},
				fieldfixedTable:'right',
				footerShow:true,
				databaseIndex: false,
				fieldIndex:false,
				databaseData: '',
				databaseTitle: '新增数据库表名',
				buttonList: [{
						icon: 'el-icon-plus'
					},
				],
				databaseFunData: [{
					color: '#3CA2E1',
					text: '编辑'
				}, {
					color: '#ff0000',
					text: '删除'
				}],

				databaseTabLoading: false,
				databaseTableHeight: '20vh',
				basicFormRow: configData.basicFormRow,
				databaseTableColumn: configData.databaseTableColumn,
				tablesData: [],
				fieldTabLoading: false,
				fieldTitle:'新增表字段',
				fieldLoading: false,
				fieldTableHeight: '60vh',
				fieldTableColumn: configData.fieldTableColumn,
				fieldFormRow: configData.fieldFormRow,
				tableCoulmnData: [],
				fieldName: '',
				fieldDialog:false,
				fielFunData: [{
					color: '#3CA2E1',
					text: '编辑'
				}, {
					color: '#ff0000',
					text: '删除'
				}],
				menuDialog: false,
				menuHight: 'auto',
				menuData: [],
				dialogFrom: {
					parentName: '',
					parentId: '',
					Bm_openType:''
				},
				databaseDialog: false,
				databaseFormRow: configData.databaseFormRow,
				mainTablemData:[
					{sort:1,fieldNameEN:'billid',fieldNameCN:'唯一ID',fieldType:'uniqueidentifier',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:2,fieldNameEN:'billCode',fieldNameCN:'单据编号',fieldType:'nvarchar',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',isVisible:'1'},
					{sort:3,fieldNameEN:'organID',fieldNameCN:'部门ID',fieldType:'nvarchar',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',isVisible:'1'},
					{sort:101,fieldNameEN:'createPersonID',fieldNameCN:'创建人ID',fieldType:'nvarchar',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:102,fieldNameEN:'createDate',fieldNameCN:'创建日期',fieldType:'datetime',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:103,fieldNameEN:'updatePersonID',fieldNameCN:'最后一次修改人',fieldType:'nvarchar',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'0',isVisible:'0'},
					{sort:104,fieldNameEN:'updateDate',fieldNameCN:'最后一次修改日期',fieldType:'datetime',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'0',isVisible:'0'},
					{sort:105,fieldNameEN:'isdelete',fieldNameCN:'删除标识（1删除）',fieldType:'int',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'0',isVisible:'0'},
				],
				subtableData:[
					{sort:1,fieldNameEN:'detail_ID',fieldNameCN:'子表唯一ID',fieldType:'uniqueidentifier',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:104,fieldNameEN:'rowIndex',fieldNameCN:'行号',fieldType:'int',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'1',isVisible:'1'},
					{sort:101,fieldNameEN:'mainID',fieldNameCN:'主表ID',fieldType:'nvarchar',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:102,fieldNameEN:'detail_createDate',fieldNameCN:'创建日期',fieldType:'datetime',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:103,fieldNameEN:'Detail_updateDate',fieldNameCN:'最后一次修改日期',fieldType:'datetime',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'0',isVisible:'0'},
				],
				grandsonTableData:[
					{sort:1,fieldNameEN:'detail_ID',fieldNameCN:'子表唯一ID',fieldType:'uniqueidentifier',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:104,fieldNameEN:'rowIndex',fieldNameCN:'行号',fieldType:'int',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'1',show:'1',isVisible:'0'},
					{sort:101,fieldNameEN:'mainID',fieldNameCN:'主表ID',fieldType:'nvarchar',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',show:'0',isVisible:'0'},
					{sort:102,fieldNameEN:'detail_createDate',fieldNameCN:'创建日期',fieldType:'datetime',fieldTypeLength:'(50)',dataType:'',dataSource:'',isMustFill:'1',isVisible:'0'},
					{sort:103,fieldNameEN:'Detail_updateDate',fieldNameCN:'最后一次修改日期',fieldType:'datetime',fieldTypeLength:'',dataType:'',dataSource:'',isMustFill:'0',isVisible:'0'},
				],
				temporaryTableData:[],
			}
		},
		watch:{
			databaseDialog:{
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					if(newV == false){
						this.$nextTick(()=>{
							this.$refs.databaseForm.resetForm('ruleForm')
						})
					}
				}
			},
			fieldDialog:{
				deep: true, //深度监听设置为 true
				handler: function(newV, oldV) {
					if(newV == false){
						this.$nextTick(()=>{
							this.$refs.fieldForm.choiceAssignment({})
						})
					}
				}
			},
			
		},
		created() {
			this.inPage()
		},
		methods: {
			inPage() {
				this.getMenuData()
				this.getFieldType()
			},
			// 获得树状图
			async getMenuData() {
				let res = await GetMenuTree({})
				if (res.code == 1) {
					this.menuData = JSON.parse(res.data[0])
				}
			},
			//上级菜单选择
			elDialogClick() {
				this.menuDialog = true
			},
			// 获取字段类型
			async getFieldType() {
				let params = {
					KindId: 22,
					page:1,
					limit:999,
					Sequence:'',
					SequenceName:''
				}
				let res = await dataDictionaryGetBillList(params)
				if (res.code == 1) {
					let arrList = []
					if(res.data[0] > 0){
						res.data[1].forEach(el=>{
							let arr = {
								label:el.ddd_DicDetailsName,
								value:el.ddd_DicDetailsID
							}
							arrList.push(arr)
						})
					}
					configData.fieldFormRow[0].elCol[0].options = arrList
				}
			},
			//提交
			getSubmit() {},
			//数据库表按钮点击
			databaseFuncBtn(btnEven) {
				if (btnEven.icon == 'el-icon-plus') {
					if (this.$refs.customForm.ruleForm.Bm_type == undefined) {
						this.$vmNews('数据库表名不得为空', 'err')
						return
					}
					let Bm_typeName = {
						0:'System',
						1:'Business',
						2:'Base',
					}
					this.databaseTitle = '新增数据库表名'
					this.databaseDialog = true
					let arr = Bm_typeName[this.$refs.customForm.ruleForm.Bm_type] + "_"
					this.$nextTick(() => {
						this.$refs.databaseForm.getField('tableType', 1)
						this.$refs.databaseForm.getField('showType', 1)
						this.$refs.databaseForm.getField('tableNameEN', arr)
					})
				}
			},
			// 表字段按钮点击
			fieldFuncBtn(btnEven) {
				console.log("123");
				if (btnEven.icon == 'el-icon-plus') {
					this.fieldTitle = '新增表字段'
					this.fieldDialog = true
				}
			},
			// 表字段选择框选中
			fieldSelect(val, index, indexRow){
				if(val){
					configData.fieldFormRow[0].elCol[0].options.forEach(el=>{
						if(val == el.value){
							this.$nextTick(()=>{
								this.$refs.fieldForm.getField('fieldTypeName',el.label)
							})
						}
					})
				}
			},
			// 单元格点击事件
			databaseTCell() {},
			// 获取详情
			async getFieldDetail(tableNameEN,arr){
				let params = {
					tableNameEN:tableNameEN
				}
				this.documentRecord.push(params)
				let res = await GetTablesCoulmn(params)
				if(res.code == 1){
					arr.tableData = Object.assign([], res.data[0])
					this.temporaryTableData.push(arr)
					this.tableCoulmnData = arr.tableData 
				}
			},
			// 双击事件
			databaseDbclick(row){
				this.fieldName = row.tableNameEN
				let arr = {
					name:row.tableNameEN,
					tableData:[]
				}
				let identical = true //是否不同
				if(this.temporaryTableData.length > 0){
					this.temporaryTableData.forEach(el =>{
						if(el.name == row.tableNameEN){
							this.tableCoulmnData = el.tableData
							identical = false
						}
					})
					if(identical){
						if(row.detail_ID){
							this.getFieldDetail(this.fieldName,arr)
						}else{
							this.setTemporaryTableData(arr,row.tableType)
						}
					}
				}else{
					if(row.detail_ID){
						this.getFieldDetail(this.fieldName,arr)
					}else{
						this.setTemporaryTableData(arr,row.tableType)
					}
				}
			},
			setTemporaryTableData(arr,tableType){
				if(tableType == '1'){
					arr.tableData = Object.assign([], this.mainTablemData)
				}
				if(tableType == '2'){
					arr.tableData = Object.assign([], this.subtableData)
				}
				if(tableType == '3'){
					arr.tableData = Object.assign([], this.grandsonTableData)
				}
				this.temporaryTableData.push(arr)
				this.tableCoulmnData = arr.tableData 
			},
			fieldTCell() {},
			// 菜单选择
			menuConfirmClick() {
				this.$refs.customForm.incomingParameters(this.dialogFrom)
				this.menuDialog = false
			},
			//菜单树点击
			menuTreeClick(data) {
				this.dialogFrom = {
					Bm_parentMenuId: data.id,
					fatherMenuName: data.label,
				}
			},
			// 表字段确定
			fieldConfirmClick(){
				let arr = Object.assign({}, this.$refs.fieldForm.ruleForm)
				arr.fieldType = arr.fieldTypeName
				if (this.fieldTitle == '编辑表字段') {
					this.tableCoulmnData[this.fieldIndex] = arr
				} else {
					this.tableCoulmnData.push(arr)
				}
				this.fieldDialog = false
				this.$nextTick(() => {
					this.$refs.fieldCustomtable.itemKey = !this.$refs.fieldCustomtable.itemKey
				})
			},
			// 库名确定
			databaseConfirmClick() {
				let pass = true
				let arr = Object.assign({}, this.$refs.databaseForm.ruleForm)
				if (this.databaseTitle == '编辑数据库表名') {
					this.tablesData[this.databaseIndex] = arr
				} else {
					if(!arr.tableNameCN){
						this.$vmNews('请填写中文名')
						pass = false
						return
					}
					if(!arr.sort ){
						if(arr.sort == 0){
							
						}else{
							this.$vmNews('请填写排序')
							pass = false
							return
						}
						
					}
					if(this.tablesData && this.tablesData.length> 0 ){
						this.tablesData.forEach(el=>{
							if(arr.tableNameEN == el.tableNameEN){
								this.$vmNews('英文名重复')
								pass = false
								return
							}
						})
					}
					if(pass){
							this.tablesData.push(arr)
					}
				}
				if(pass){
					this.databaseDialog = false
					this.$nextTick(() => {
						this.$refs.databaseCustomtable.itemKey = !this.$refs.databaseCustomtable.itemKey
					
					})
				}
			},
			databaseRadioChange(val) {
				this.databaseData = val
				this.databaseIndex = val.index
			},
			databaseOnFunc(index, row) {
				this.databaseIndex = row.index
				if (index == '0') {
					this.databaseData = row
					this.databaseTitle = '编辑数据库表名'
					this.databaseDialog = true
					this.$nextTick(() => {
						this.$refs.databaseForm.incomingParameters(this.databaseData)
					})
				}
				if (index == '1') {
					if (this.$parent.$parent.$parent.selectStatus == "新增") {
						this.$confirm('确认删除该数据吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.tablesData.splice(this.databaseIndex, 1)
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						})
					} else if (this.$parent.$parent.$parent.selectStatus == "编辑") {
						this.$confirm('确认删除该数据吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.DelTables(row)
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						})
					}

				}
			},
			async DelTables(row) {
				try {
					const res = await DelTables({id: row.detail_ID})
					if (res.success == "true") {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.tablesData.splice(this.databaseIndex, 1)
					}
				} catch (error) {
					console.log(error);
				}

			},
			fieldOnFunc(index, row) {
				this.fieldIndex = row.index
				if (index == '0') {
					this.fieldData = row
					this.fieldTitle = '编辑表字段'
					this.fieldDialog = true
					this.$nextTick(() => {
						this.$refs.fieldForm.incomingParameters(this.fieldData)
					})
				}
				if (index == '1') {
					if (this.$parent.$parent.$parent.selectStatus == "新增") {
						this.$confirm('确认删除该数据吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.tableCoulmnData.splice(this.fieldIndex, 1)
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						})
					} else if (this.$parent.$parent.$parent.selectStatus == "编辑") {
						this.$confirm('确认删除该数据吗?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.DelTableColumn(row)
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消删除'
							});
						})
					}
				}
			},
			async DelTableColumn(row){
				try {
					const res = await DelTableColumn({id: row.detail_ID})
					if (res.success == "true") {
						this.$message({
							type: 'success',
							message: '删除成功'
						});
						this.tableCoulmnData.splice(this.fieldIndex, 1)
					}
				} catch (error) {
					console.log(error);
				}
			}
		}
	}
</script>

<style scoped>
	/* >>>.el-radio__label {
		display: none;
	} */
	.small_title {
		box-sizing: border-box;
		font-size: 14px;
		font-weight: 600;
		padding: 5px;
		margin: 0px auto 9px;
		color: #000000d9;
		border-bottom: 1px solid #ccc;
	}

	.bigTitle {
		font-size: 20px;
		font-weight: bold;
		color: black;
		text-align: center;
	}

	.organizationBody {
		display: flex;
		justify-content: space-evenly;
		background-color: #f2f3f4;
		padding: 10px;
		max-height: 400px;
		overflow: auto;
	}
</style>
